<template>
    <!-- 这是商品详情页 -->
    <div class="details" ref="datails">
        <div class="top">
            <!-- 导航面包屑 -->
            <div class="top-nav">
                <a-breadcrumb style="color: #003150">
                    <a-breadcrumb-item><router-link to="/index" style="color: #003150">主页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item style="color: #003150">腕表</a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/index" style="color: #003150">{{series[0]}}</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item style="color: #003150">{{goods.name}}</a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <a-row type="flex" justify="space-between" class="top-center">
                <!-- 左边的轮播照片 -->
      		    <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="top-center-left">
                    <!-- 排列的图片 -->
                    <div class="top-center-list" v-if="slideList.length >= 1">
                        <a-icon type="up" style="font-size: 24px;"  @click="num >= 0 ? num : num++" />
                        <div>
                            <ul :style="`transform: translateY(${108 * num}px);`">
                                <li v-for="item in slideList" 
                                :key="item.id" @click="alterId(item.id)" 
                                >
                                    <img :src="item.path" alt="" :class="{liShow: itemId == item.id}">
                                </li>
                            </ul>
                        </div>
                        <a-icon type="down" style="font-size: 24px;" @click="num <= (3 - slideList.length) ? num : num--" />
                    </div>
                    <!-- 展示的大图片 -->
                    <div class="top-center-left-img">
                        <img v-for="item in slideList" 
                        :key="item.id" 
                        :src="item.path" alt="" 
                        v-show="itemId == item.id">
                    </div>
      		    </a-col>
                <!-- 右边的商品信息 -->
      		    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="top-center-right">
				    <div>
                        <h1>{{series[0]}}</h1>
                        <h3>{{series[2]}} {{series[1]}}</h3>
                        <div class="top-center-right1">
                            <span>{{price | demoMoney}}</span>
                            <span>查看花呗分期详情</span>
                        </div>
                        <div class="top-center-right2">
                            <button @click="addToCart">加入购物车</button>
                            <button>现在购买</button>
                        </div>
                        <div class="top-center-right3">
                            <a-tabs default-active-key="1" class="top-center-right3-list">
                                <a-tab-pane key="1" tab="表壳" class="item1">
                                    <ul>
                                        <li><span>尺寸：</span><span></span>{{series[2]}}</li>
                                        <li><span>防水性能：</span><span></span>30巴</li>
                                        <li><span>圆形：</span><span></span>圆形</li>
                                        <li><span>材质：</span><span></span>精钢和黄色PVD涂层</li>
                                        <li><span>表镜：</span><span></span>抗磨损合成蓝宝石镜面，两面带多层反光涂层</li>
                                        <li><span>表背：</span><span></span>旋入式</li>
                                        <li><span>表壳厚度：</span><span></span>11.90 mm</li>
                                        <li><span>表耳阔度：</span><span></span>21 mm</li>
                                    </ul>
                                </a-tab-pane>
                                <a-tab-pane key="2" tab="表盘和指针" force-render>
                                    <ul>
                                        <li><span>颜色：</span><span>黑色太阳饰纹</span></li>
                                        <li><span>运行时标：</span><span>镶嵌阿拉伯数字和时标</span></li>
                                        <li><span>指针：</span><span>镀金指针</span></li>
                                    </ul>
                                </a-tab-pane>
                                <a-tab-pane key="3" tab="机芯和功能">
                                    <ul>
                                        <li><span>机芯类型：</span><span>自动上链机机械芯</span></li>
                                        <li><span>机芯：</span><span>L888</span></li>
                                        <li><span>功能：</span><span>时、分、秒和日期显示</span></li>
                                        <li><span>机芯：</span><span>自动上链机械芯，每小时振动24,200 次, 可达约72小时动力储存</span></li>
                                    </ul>
                                </a-tab-pane>
                                <a-tab-pane key="4" tab="表链">
                                    <ul>
                                        <li><span>表扣：</span><span>双折式安全表扣，带潜水延展装置。</span></li>
                                        <li><span>材质：</span><span>精钢和黄色PVD涂层</span></li>
                                    </ul>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
      		    </a-col>
    	    </a-row>
        </div>
        <div class="center" ref="bigPicture">
            <img src="../assets/image/副表_10010.png" alt="">
        </div>
        <div class="bottom">
            <div>
                <h2>享受浪琴品质服务</h2>
                <img src="../assets/image/副表_10011.jpg" alt="" class="hidden-xs-only">
                <img src="../assets/image/副表_10012.jpg" alt="" class="hidden-sm-and-up">
            </div>
        </div>
    </div>
</template>

<script>
import {goodsId} from '../assets/js/request.js'
import {mapMutations, mapActions} from 'vuex'
export default {
    filters:{
        demoMoney(value) {
            return '￥' + value + ".00"
        }
    },
    data() {
        return {
        // 轮播的照片数
        num: 0,
        // 当前展示的大图片的下标
        itemId: 0,
        // 商品的所有信息
        goods: {},
        // 商品的照片数组
        slideList: [],
        // 系列，型号
        series: [],
        // 价格
        price: 0,
        // 获取商品详情大图片
        bigPicture: ''
    };
    },
    // 请求商品详情
    async created() {
        let arr = await goodsId(this.$route.params.id)
        // 将商品所有信息深拷贝
        Object.assign(this.goods, arr)
        this.series = this.goods.desc.split("_")
        // 转换价格的格式
        this.price = this.goods.price.toLocaleString()
        // 除去第一张照片
        arr.s_goods_photos.splice(0, 1)
        // 把照片的地址数组赋值给slideList
        this.slideList = arr.s_goods_photos
        this.itemId = this.slideList[0].id
        // 获取商品详情大图片
        this.bigPicture = this.goods.rich_text

        // 数据回来时改变vuex里的响应参数
        this.ifResponseFn(true)
        // 将商品的所有信息传递到vuex
        this.goodsDetails(this.goods)
    },
    mounted() {
        // 监听window的滚动事件
         window.addEventListener("scroll", this.scrollInfo)
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollInfo)
        this.change(false)
        this.ifResponseFn(false)
    },
    methods: {
        alterId(num) {
            this.itemId = num;
        },
        ...mapActions('cart', ['AddCart']),
        ...mapActions('details', ['goodsDetails','change', 'ifResponseFn']),
        addToCart() {
            // console.log(this.goods)
            if(this.$Cookie.get("user")) {
                let result = this.AddCart(this.goods.id)
                if (result) {
                    this.$message.success('添加成功');
                } else {
                    this.$message.error('添加失败');
                }
            } else {
                let id = this.$route.params.id
                this.$router.push({path:'/login',query:{id}})
            }
        },

        // 防抖函数, 立即执行第一次
        debounce(fn,wait){
            let timeid,flag = true;
            return function(){
                clearTimeout(timeid);
                if(flag){
                    fn();
                    flag = false;
                }else{
                    timeid = setTimeout(function(){
                        flag = true;
                    },wait)
                }
            }
        },    
        // 判断滚动条滚动距离顶部的距离
        scrollInfo() {
            if(document.documentElement.scrollTop > 220) {
                this.change(true)
            } else {
                this.change(false)
            }
        }
    },
    watch: {
        bigPicture() {
            this.$refs.bigPicture.innerHTML += this.bigPicture
        }
    }
}
</script>

<style lang='scss' scoped>
.details {
    // 顶部照片和详情
    .top {
        width: 100%;
        background: #f0f1f3;
        // 顶部导航
        .top-nav {
            width: 90%;
            margin: 0px auto;
            padding: 15px 0;
            text-align: left;
        }
        .top-center {
            width: 90%;
            margin: 0 auto;
            // 左边的轮播图
            .top-center-left {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 500px;
                margin-right: 30px;
                // 排序的图片
                .top-center-list {
                    div {
                        height: 310px;
                        overflow: hidden;
                        width: 100px;
                        ul {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            transition: all 0.3s;
                            li {
                                margin: 7px 0;
                                &:first-child {
                                    margin-top: 0;
                                }
                                &:last-child {
                                    margin-bottom: 0;
                                }
                                img {
                                    width: 94px;
                                    height: 94px;
                                }
                            }
                            .liShow {
                                border: 1px solid #003150;
                            }
                        }
                    }   
                }
                // 展示的大图片
                .top-center-left-img {
                    padding: 10px;
                    img {
                        width: 100%;
                        flex: 1 1 auto;
                        @media (max-width: 768px) {
                            width: 60%;
                        }
                    }
                }
            }
            // 右边的商品信息
            .top-center-right {
                text-align: left;
                padding: 0 32px;
                @media (max-width: 1200px) {
                    padding: 0px;
                }
                h1 {
                    font-size: 28px;
                    font-weight: 500;
                    color: #003150;
                    padding: 0 0 15px;
                    margin: 0px;
                }
                h3 {
                    font-size: 15px;
                    font-weight: normal;
                    margin-bottom: 25px;
                    color: #a6a6a6;
                }
                .top-center-right1 {
                    font-size: 22px;
                    color: #003150;
                    margin: 0 0 30px;
                    span:last-child {
                        margin-left: 10px;
                        display: inline-block;
                        border-bottom: 2px solid #003150;
                    }
                }
                .top-center-right2 {
                    button {
                        font-size: 15px;
                        width: 203px;
                        height: 70px;
                        padding: 15px 10px;
                        background: #003150;
                        color: white;
                        padding: 15px 10px;
                        margin-right: 20px;
                        @media (max-width: 1200px) {
                            width: 160px;
                            height: 50px;
                            margin-right: 10px;
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                        &:hover {
                            background-color: white;
                            color: #003150;
                            border: 1px solid #003150;
                        }
                    }
                }
                .top-center-right3 {
                    .top-center-right3-list {
                        li {
                            span:first-child {
                                font-size: 14px;
                                color: #003150;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }
    }
    // 中部商品广告
    .center {
        img:first-child {
            margin: 20px 0;
        }
    }
    // 底部服务介绍
    .bottom {
        width: 100%;
        margin-bottom: 100px;
        div {
            h2 {
                color: #003150;
                font-size: 20px;
                padding: 40px 0 30px;
            }
            img {
                width: 100%;
            }
        }
    }
}
</style>